<template>
  <p-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <p-spin :spinning="confirmLoading">
      <p-form :form="form">
        <p-row>
          <p-col :span="24">
            <p-form-item label="二级工序编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <template>
                <p-tree-select
                  v-decorator="[ 'process2No', validatorRules.process2No]"
                  style="width: 100%"
                  :dropdown-style="{ maxHeight: '500px', overflow: 'auto' }"
                  placeholder="请选择二级工序编码"
                  org-fields="process2No,process2Name,process2Explain"
                  dest-fields="process2No,process2Name,process2Explain"
                  :tree-data="treeData"
                  :load-data="onLoadData"
                  @change="selectNode"
                ></p-tree-select>
              </template>
            </p-form-item>
          </p-col>
          <p-col :span="24">
            <p-form-item label="二级工序名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <p-input disabled v-model="process2Name"></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="24">
            <p-form-item label="二级工序描述" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <p-input disabled v-model="process2Explain"></p-input>
            </p-form-item>
          </p-col>
          <p-col :span="24">
            <p-form-item label="标签模板编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <!-- <f-popup-mes
                contextPath="mes-code"
                v-decorator="['labelTemplateNo', validatorRules.labelTemplateNo]"
                :trigger-change="true"
                org-fields="id,labelTemplateName,labelTemplateNo"
                dest-fields="id,labelTemplateName,labelTemplateNo"
                code="mes_get_barcode_template"
                :tableColumns="tableColumns"
                @callback="popupCallback"
              /> -->

              <p-select
                show-search
                placeholder="Select a person"
                option-filter-prop="children"
                v-decorator="['labelTemplateNo', validatorRules.labelTemplateNo]"
                :filter-option="filterOption"
                @focus="handleFocus"
                @blur="handleBlur"
                @change="handleChange"
              >
                <p-select-option :value="item.labelTemplateName" v-for="(item, index) in mesBcTemplateList" :key="index">
                  {{item.labelTemplateName}}
                </p-select-option>
              </p-select>        

            </p-form-item>
          </p-col>
          <p-col :span="24">
            <p-form-item label="标签模板名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <p-input
                v-decorator="[ 'labelTemplateName', validatorRules.labelTemplateName]"
                placeholder="请输入标签模板名称"
              ></p-input>
            </p-form-item>
          </p-col>
          <!-- <p-col  :span="24">
			<p-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
				<j-dict-select-tag  type="radio" v-decorator="['status', validatorRules.status]" :trigger-change="true" dictCode="mes_open_close" placeholder="请选择状态"/>
			</p-form-item>
		  </p-col>
		  <p-col  :span="24">
			<p-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
				<p-input  v-decorator="[ 'remark', validatorRules.remark]" placeholder="请输入备注"></p-input>
			</p-form-item>
          </p-col>-->
        </p-row>
      </p-form>
    </p-spin>
  </p-modal>
</template>

<script>
import { httpAction, getAction } from "@/api/manage";
import { SubmitOnchangMixin } from "@/mixins/SubmitOnchangMixin";
import pick from "lodash.pick";
import { validateDuplicateValue } from "@/utils/util";
import JDictSelectTag from "@/components/dict/JDictSelectTag";
import fPopupMes from "@/components/fPopupMes/fPopupMes";

export default {
  name: "MesBcProcessLabelModal",
  mixins: [SubmitOnchangMixin],
  components: {
    JDictSelectTag,
    fPopupMes,
  },
  data() {
    return {
      process2Name: "",
      process2Explain: "",
      form: this.$form.createForm(this),
      title: "操作",
      width: 800,
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {
        process2No: {
          rules: [{ required: true, message: "请输入二级工序编码!" }],
        },
        process2Name: {
          rules: [{ required: true, message: "请输入二级工序名称!" }],
        },
        process2Explain: {
          rules: [{ required: true, message: "请输入二级工序描述!" }],
        },
        labelTemplateNo: {
          rules: [{ required: true, message: "请输入标签模板编码!" }],
        },
        labelTemplateName: {
          rules: [{ required: true, message: "请输入标签模板名称!" }],
        },
        status: { rules: [{ required: true, message: "请输入状态!" }] },
        remark: { rules: [] },
      },
      url: {
        add: "/mes-code/mesBcProcessLabel",
        edit: "/mes-code/mesBcProcessLabel",
        pro1No: "/mes-craft/craft/mesPeDefinition/search/tree",
        pro2No: "/mes-craft/craft/mesPeDefinition/child",
				mesBcTemplateList: '/mes-code/mesBcTemplate/all', // 标签信息列表
      },
      tableColumns: [
        {
          title: "标签模板编号",
          align: "center",
          dataIndex: "labelTemplateNo",
        },
        {
          title: "标签模板名称",
          align: "center",
          dataIndex: "labelTemplateName",
        },
        {
          title: "标签模板描述",
          align: "center",
          dataIndex: "labelTemplateDescrtion",
        },
        {
          title: "标签模板尺寸",
          align: "center",
          dataIndex: "labelTemplateLength",
        },
        {
          title: "标签类型",
          align: "center",
          dataIndex: "labelType",
        },
        {
          title: "责任部门",
          align: "center",
          dataIndex: "dptname",
        },
        {
          title: "标签纸颜色",
          align: "center",
          dataIndex: "labelColor",
        },
        {
          title: "碳带型号",
          align: "center",
          dataIndex: "ribbonsType",
        },
        {
          title: "打印机型号",
          align: "center",
          dataIndex: "printerType",
        },
        {
          title: "是否包含流水号",
          align: "center",
          dataIndex: "containSn",
        },
      ],
      treeData: [],
    };
  },
  mounted() {
    this.getMesBcTemplateList()
    // this.loadData()
  },
  methods: {

		getMesBcTemplateList() {
			const parmas = {
				pageSize: 1000,
			}
			getAction(this.url.mesBcTemplateList, parmas).then( res => {
				if ( res.success) {
					this.mesBcTemplateList = res.data
				}
			} )
		},

    add() {
      this.edit({});
      this.loadData();
    },

    edit(record) {
      this.form.resetFields();
      this.model = Object.assign({}, record);
      this.visible = true;
      // this.model.process2Name = this.process2Name
      // this.model.process2Explain = this.process2Explain
      // console.log(1234);
      
      // console.log(this.model);
      
      this.$nextTick(() => {
        this.form.setFieldsValue(
          pick(
            this.model,
            "process2No",
            "process2Name",
            "process2Explain",
            "labelTemplateNo",
            "labelTemplateName",
            "status",
            "remark",
            "createBy",
            "createTime",
            "updateBy",
            "updateTime"
          )
        );
      });
    },
    close() {
      this.$emit("close");
      this.visible = false;
    },
    handleOk() {
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let httpurl = "";
          let method = "";
          this.model.process2Name = this.process2Name[0]
          this.model.process2Explain = this.process2Explain[0]
          let formData = Object.assign(this.model, values);
          this.formData = Object.assign(this.model, values);
          //新增触发
          if (!this.model.id) {
            httpurl += this.url.add;
            method = "post";
            if (this.EnhanceJS.afterAdd) {
              //新增之前
              let Obj = eval(this.EnhanceJS.afterAdd);
              new Obj(this);
            } else {
              console.log("表单提交数据", formData);
              that.modalFrom(httpurl, formData, method);
            }
          } else {
            //编辑触发
            httpurl += this.url.edit;
            method = "put";
            if (this.EnhanceJS.afterEdit) {
              //编辑之前
              let Obj = eval(this.EnhanceJS.afterEdit);
              new Obj(this);
            } else {
              console.log("表单提交数据", formData);
              that.modalFrom(httpurl, formData, method);
            }
          }
        }
      });
    },
    selectNode(value, node, extra) {
      // console.log(value, node, extra);
      this.process2Name = node;
      this.process2Explain = node;
    },
    loadData(arg) {
      if (!this.url.pro1No) {
        this.$message.error("请设置url.pro2No属性!");
        return;
      }
      getAction(this.url.pro1No, {}).then((res) => {
        if (res.success) {
          res.data.forEach((item) => {
            const obj = {
              id: item.id,
              title: item.processmname,
              value: item.processmcode,
              isLeaf: !item.hasChild,
              disabled: true,
            };
            this.treeData.push(obj);
          });
        }
        if (res.code === 510) {
          this.$message.warning(res.msg);
        }
      });
    },
    onLoadData(node) {
      return new Promise((resolve) => {
        getAction(this.url.pro2No, { pid: node.dataRef.id }).then((res) => {
          if (res.success) {
            node.dataRef.children = [];
            res.data.forEach((item) => {
              const obj = {
                id: item.id,
                title: item.processmname,
                value: item.processmcode,
                processsprc: item.processmcode,
                isLeaf: true,
              };
              node.dataRef.children.push(obj);
            });
            this.treeData = [...this.treeData];
          }
          if (res.code === 510) {
            this.$message.warning(res.msg);
          }
        });
        resolve();
      });
    },
    handleCancel() {
      this.close();
    },
    popupCallback(row) {
      this.form.setFieldsValue(
        pick(
          row,
          "process2No",
          "process2Name",
          "process2Explain",
          "labelTemplateNo",
          "labelTemplateName",
          "status",
          "remark",
          "createBy",
          "createTime",
          "updateBy",
          "updateTime"
        )
      );
    },

		handleChange(value) {
			console.log(`selected ${value}`);
		},
		handleBlur() {
			console.log('blur');
		},
		handleFocus() {
			console.log('focus');
		},
		filterOption(input, option) {
			return (
				option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
			);
		},

  },
};
</script>